<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>随心听</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!--<meta name="keywords" content="Trendy Login Form template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />-->
  <script type="application/x-javascript"> addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
  }, false);

  function hideURLbar() {
    window.scrollTo(0, 1);
  } </script>
  <!-- Custom Theme files -->
  <link th:href="@{/login/css/style.css}" rel="stylesheet" type="text/css" media="all"/>
  <link th:href="@{/login/css/layui.css}" rel="stylesheet" type="text/css">
  <link th:href="@{backed/assets/plugins/element-ui/index.css}"  rel="stylesheet">
  <link th:href="@{/login/css/s1.css}" type='text/css'><!--web font-->
  <!-- //web font -->
  <style>
    .text_username {
      outline: none;
      font-size: 15px;
      color: #fff;
      border: none;
      width: 90%;
      display: inline-block;
      background: transparent;
      font-family: 'Muli', sans-serif;
      text-align: center;
      letter-spacing: 2px;
    }
  </style>
</head>
<body>
<!-- main -->
<div class="agileits-main" id="app">
  <div class="w3top-nav">
    <div class="w3top-nav-left">
      <h1>Trendy</h1>
    </div>
    <div class="w3top-nav-right">

    </div>
    <div class="clear"></div>
  </div>
  <div class="header-main">
    <h2>Forgot Password</h2>
    <!--        <button type="button" class="layui-btn layui-btn-primary" lay-on="msg">Msg</button>-->
    <div class="header-bottom">
      <div class="header-right w3agile">
        <div class="header-left-bottom agileinfo">
          <form method="post" lay-filter="add_form">
            <div class="icon1">
              <input type="text" name="username" placeholder="username" required=""
                     v-model:value="forgotData.username"/>
            </div>
            <div class="icon1">
              <input type="email" name="email" placeholder="email@qq.com" required=""
                     v-model:value="forgotData.email"/>
            </div>
            <div class="icon1" style="position: relative">
              <input type="text" class="Captcha" name="smsCode" placeholder="Captcha" v-model:value="inputCode"
                     required="" style="width: 200px"/>
              <span id="GetCaptcha" @click="sendCode">Get Captcha</span>
              <!--              name="" th:value="Get " style="width: 90px;height: 30px;;right: 2px;bottom: 3px;text-align: center"/>-->
            </div>
            <div class="icon1">
              <input type="password" name="password" placeholder="Password" required=""
                     v-model:value="forgotData.password"/>
            </div>
            <div class="bottom">
              <input type="button" value="Update" lay-on="msg" @click="updatePassword"/>
            </div>
            <p><a th:href="@{/login.html}" style="color: #31bdec">Login Now?</a></p>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- //main -->
<!-- copyright -->
<div class="copyright w3-agile">
  <p>© 2024 Trendy Login Form . All rights reserved | Design by <a href="http://w3layouts.com/" target="_blank">W3layouts</a>
  </p>
</div>
<!-- //copyright -->

</body>
<script th:src="@{/login/js/layui.js}"></script>
<script th:src="@{/login/js/jquery-1.12.4.js}"></script>
<script th:src="@{/login/js/vue.js}"></script>
<script th:src="@{/login/js/login_js/login.js}"></script>
<script th:src="@{/login/js/forgotPassword_js/forgotPassword.js}"></script>
<script th:src="@{/login/js/emailCode/emailCode.js}"></script>
<script th:src="@{backed/assets/plugins/element-ui/index.js}"></script>


<script th:inline="javascript">


</script>

<script>

  const vm = new Vue({

    el: "#app",
    data: {
        forgotData:{
          username:"",
          email:"",
          password:"",
        },
      //服务器返回的验证码
      smsCode: "",
      //用户填写的验证码
      inputCode: "",
      spanText:""
    },

    methods: {

      //1、点击修改执行
      updatePassword() {
        let that = this;
        //1.1验证验证码输入是否正确！
        if (formValidation(that.forgotData)) {
          if (that.inputCode !== "" && that.smsCode === that.inputCode) {
            //1.1.1 发送请求后端接口完成注册
            updatePasswordApi(this.forgotData).done(function (res){
              //1.1.1.1请求成功执行的回调函数
              if (res.code === 200) {
                //注册成功
                //记住账号、跳回登录
                window.localStorage.setItem("forgot_return_username",that.forgotData.username);
                window.localStorage.setItem("forgot_return_password",that.forgotData.password);
                window.location.href="login.html";
              }else {
                //1.1.1.2 提示信息注册失败！
                alert("网络繁忙！")
              }
            }).fail(function (e){
              //请求失败执行的回调函数
              alert("网路超时！")
            })
          } else {
            //1.1.2 提示信息:验证码输入有误！
            alert("验证码输入错误！")
          }
        }

      },
      //2、邮件验证码发送
      sendCode() {
        let that = this;
        let time=30; //30秒
        if (that.forgotData.email !== "" && /^[1-9][0-9]{4,10}@qq.com$/.test(that.forgotData.email)) {
          //2.1发送验证码请求
          codeApi(that.forgotData.email,"forgot").done(function (res) {
            if (res.code === 200) {
              //2.1.1提示信息验证码发送成功！
              //alert(res.msg);
              //2.1.2拿到验证码的值
              that.smsCode = res.data;
            } else {
              //2.1.3 提示错误信息
              console.log("错误")
              alert(res.msg);
            }
          })

          //2.2 创建定时器，倒计时
          // let timer=setInterval(function (){
          //   $("#GetCaptcha").val(time--+"s");
          // },time*1000)
          // clearInterval(timer);
          // $("#GetCaptcha").val("Get Captcha");

        } else {
          //2.3提示邮箱未输入
          alert("邮箱为空或格式有误！");
        }

      },

    }
  });

</script>
</html>
<script setup lang="ts">
</script>